<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../kindeditor/kindeditor-all.js"></script>
    <script src="../kindeditor/kindeditor-all-min.js"></script>
    <script src="../kindeditor/Gruntfile.js"></script>
    <script src="../kindeditor/lang/zh-CN.js"></script>
    <script src="../kindeditor/lib/jquery.min.js"></script>

<!--    <script src="../kindeditor/Gruntfile.js"></script>-->

</head>
<body>
<form id="form" action="/info">
    <label>反馈内容</label>
    <!--由于绑定文本编辑器的textarea-->
    <textarea id="content" name="content" style="width:700px;height:500px;visibility:hidden;"><!--<td th:text="${message.content}">--></td>
    </textarea><br/>
    <input type="button" value="提交" οnclick="submit();"/>
    <!--由于显示编辑器提交后的内容-->
    <div id="show" style="width: 700px;word-wrap: break-word;word-break: normal;"></div>

</form>

</body>


<img src="../img/16212334012741.jpg" height="450" width="309"/>
<script>


    KindEditor.ready(function(K) {
        K.create('textarea[name="content"]', {
                resizeType : 1,
                uploadJson : '/uploadImg',
                allowFileManager : true,//是否允许浏览服务器上传文件
                allowImageUpload:true,//允许上传图片
                afterUpload: function(){this.sync();}, //图片上传后，将上传内容同步到textarea中
                afterBlur: function(){this.sync();},   //失去焦点时，将上传内容同步到textarea中
                afterCreate : function(msg) {
                var self = this;
                K.ctrl(document, 13, function() {
                    self.sync();
                    document.forms['example'].submit();
                });
                K.ctrl(self.edit.doc, 13, function() {
                    self.sync();
                    document.forms['example'].submit();
                });

            }
        });

    });
</script>


















<script>


    /*KindEditor.ready(function (K) {
        var editor = K.create('#content', {
            fillDescAfterUploadImage : false, //上传图片成功后转到属性页，为false则直接插入图片[设为true方便自定义函数(X_afterSelect)]
            urlType : '/uploadImg', //上传图片返回带 当前网址的图片地址
            //上传管理
            uploadJson: '/uploadImg',
            //文件管理
            // fileManagerJson: '/js/kindeditor/asp.net/file_manager_json.ashx',
            allowFileManager: true,
            //设置编辑器创建后执行的回调函数
            afterCreate: function () {
                var self = this;
                K.ctrl(document, 13, function () {
                    self.sync();
                    K('form[name=example]')[0].submit();
                });
                K.ctrl(self.edit.doc, 13, function () {
                    self.sync();
                    K('form[name=example]')[0].submit();
                });
            },
            //上传文件后执行的回调函数,获取上传图片的路径
            afterUpload: function (url) {
                var a = $("#content").val();
                if (a.length > 0) {
                    $("#content").val(a + "," + url);
                } else {
                    $("#content").val(url);
                }
                //alert($("#uppics").val())
            },
            afterCreate: function () {  //要取值设置这里 这个函数就是同步KindEditor的值到textarea文本框
                this.sync();
            },
            afterBlur: function () {  //同时设置这里
                this.sync();
            },
            items : [ 'source', '|', 'undo', 'redo', '|', 'preview',
                'print', 'template', 'cut', 'copy', 'paste',
                'plainpaste', 'wordpaste', '|', 'justifyleft',
                'justifycenter', 'justifyright', 'justifyfull',
                'insertorderedlist', 'insertunorderedlist', 'indent',
                'outdent', 'subscript', 'superscript', 'clearhtml',
                'quickformat', 'selectall', '|', 'fullscreen', '/',
                'formatblock', 'fontname', 'fontsize', '|',
                'forecolor', 'hilitecolor', 'bold', 'italic',
                'underline', 'strikethrough', 'lineheight',
                'removeformat', '|', 'table', 'hr', 'image' ],

        });
    });
*/


    /*

        KindEditor.ready(function (K) {
            var editor = K.create('#content', {
                //上传管理
                uploadJson: 'uploadImg',
                //文件管理
                // fileManagerJson: '/js/kindeditor/asp.net/file_manager_json.ashx',
                allowFileManager: true,
                //设置编辑器创建后执行的回调函数
                afterCreate: function () {
                    var self = this;
                    K.ctrl(document, 13, function () {
                        self.sync();
                        K('form[name=example]')[0].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function () {
                        self.sync();
                        K('form[name=example]')[0].submit();
                    });
                },
                //上传文件后执行的回调函数,获取上传图片的路径
                afterUpload : function(data) {
                    dialog.hideLoading();
                    if (data.error === 0) {
                        var url = data.url;
                        if (formatUploadUrl) {
                            url = K.formatUrl(url, 'absolute');
                        }
                        urlBox.val(url);

                        if (self.afterUpload) {
                            self.afterUpload.call(self, url, data, name);
                        }
                        alert(self.lang('uploadSuccess'));
                    } else {
                        alert(data.message);
                    }
                },
                afterBlur: function () {  //同时设置这里
                    this.sync();
                },

                items : [
                'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                'anchor', 'link', 'unlink', '|', 'about'
            ],
            });
        });

    */








    /*




            KindEditor.ready(function(K) {
                window.editor = K.create('#content',{
                    items : [
                        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                        'anchor', 'link', 'unlink', '|', 'about'
                    ],
                    allowImageUpload:true,//允许上传图片
                    allowFileManager:true,
                    allowPreviewEmoticons : true,
                    uploadJson : 'uploadImg',//富文本框图片上传
                    fileManagerJson : '../WxGoods/imageManage',//富文本框图片查看
                    urlType : "domain",
                    afterBlur: function(){this.sync();},
                    afterUpload: function (url, data, name) { //上传文件后执行的回调函数，必须为3个参数
                        if (name == "image" || name == "multiimage") { //单个和批量上传图片时
                            var img = new Image(); img.src = url;
                            img.onload = function () { //图片必须加载完成才能获取尺寸
                                if (img.width > 100) {
                                    KE.html(KE.html().replace('<img src="' + url + '" width="100" height="100"/>',

                                        '<img src="' + url + '" width="100" height="100px"/>'))

                                }

                            }
                        }
                    }

                });
    */

    //
    // var KE;
    // KindEditor.ready(function (K) {
    //
    //     var imgFile;
    //     KE = K.create('#content', {
    //         allowFileManager: true, //浏览图片空间
    //         filterMode: false, //HTML特殊代码过滤
    //         // uploadJson: '/uploadImg',  //上传图片接口
    //         uploadJson: "/uploadImg",
    //         allowImageRemote: false,
    //         urlType:'domain',
    //         // formatUploadUrl:false,
    //         filePostName: 'imgFile',// name属性默认值
    //         uploadJson : '../uploadImg',
    //         fileManagerJson : '../../../editor/jsp/file_manager_json.jsp',
    //
    //         afterBlur: function () {
    //             this.sync();
    //
    //         }, //编辑器失去焦点(blur)时执行的回调函数（将编辑器的HTML数据同步到textarea）
    //
    //         afterUpload: function (url, data, name) { //上传文件后执行的回调函数，必须为3个参数
    //             console.log(url);
    //             alert(url);
    //             alert(data);
    //             alert(image);//如果是单张图片，则 name="image"
    //
    //
    //            /* if (name == "image") { //单个和批量上传图片时
    //                 console.log(url)
    //                 var img = new Image();
    //                 img.src = url;
    //
    //                 img.onload = function () { //图片必须加载完成才能获取尺寸
    //                     if (img.width > 100) {
    //                         KE.html(KE.html().replace('<img src="' + url + '" width="100" height="100"/>', '<img src="' + url + '" width="100" height="100px"/>'))
    //                         //KE.html(KE.html().replace('<img src="' + url + '" width="300"/>', '<img src="' + url + '" width="300"/>'))
    //                     }
    //
    //                 }*/
    //             }
    //         // }
    //     });
    //     KE.create('#content', {allowImageUpload: false, resizeType: 1, width: "600px", height: "300px"});
    // });
    // //提交事件
    // $('#content').click(function() {
    //     var content = ed.html();//获取编辑器内容
    //     alert(content);
    // });

    // function save(){
//取得HTML内容?
//同步数据后可以直接取得textarea的value?
//         editor.sync();
//         html=document.getElementById('addeditor_id').value;//原生API
//         $("#schtmlnr").val(html);//把KindEditor产生的html代码放到schtmlnr里面，用于提交
//     }

    /*var uploadbutton = K.uploadbutton({
        button : K('#content')[0],
        fieldName : 'imgFile',
        url : '../kindeditor/jsp/upload_json.jsp',
        afterUpload : function(data) {
            if (data.error === 0) {
                alert(data.url);
                console.log(url);
            } else {
                alert(data.message);
            }
        }
    });*/

    /*

    $.ajax({
        type: 'post',
        data: $('#form').serialize(),
        url: '/uploadImg',
        cache:false,
        dataType:'text',
        success: function (data) {
            console.log("success");
        }
    }),
    */









    /* var editor;
     KindEditor.ready(function(K) {
         var imgFile;
         editor = K.create('textarea[name="content"]', {
             resizeType : 1, //0不可更改大小；1可更改高度；2，可更改高度和宽度
             allowPreviewEmoticons : false,
             allowImageUpload : true,
             uploadJson : '/uploadImage',// 上传图片接口
             filePostName: 'imgFile',// name属性默认值
             filePostName  : "imgFile",//服务端接收图片的属性名
             // uploadJson : '/uploadImage',//服务端路径
             allowFileManager : true,
             afterBlur: function(){this.sync();
                 editor1.html("测试赋值");

             },  //在编辑器失去焦点的时候将内容同步到 textarea中

             items : [
                 'fontname', 'fontsize','|',
                 'forecolor', 'hilitecolor', 'bold',
                 'italic', 'underline','removeformat',
                 '|', 'justifyleft', 'justifycenter',
                 'justifyright', 'insertorderedlist',
                 'insertunorderedlist', '|',
                 'emoticons', 'image', 'link', 'table'],

         });

     });

     function submit()
     {
         var html = editor.html();
         //同步编辑器内容
         editor.sync();
         html = KindEditor('#content').val();
         $("#show").html(html);

         return false;
     }

 */











    /* KindEditor.ready(function(K) {
         window.editor = K.create('#editor_id');
         K.create('#editor_id', {
             resizeType : 1,
             allowPreviewEmoticons : false,
             allowImageUpload : false,
             uploadJson : '/uploadImg    ',// 上传图片接口
             filePostName: 'imgFile',// name属性默认值


             afterUpload : function(url) {
                 alert(url);
             }
         });
     });


     var options = {
         cssPath : '/css/index.css',
         filterMode : true,
     }
     var editor = K.create('textarea[name="content"]', options);
     html = editor.html();
     // 同步数据后可以直接取得textarea的value
     editor.sync();
     html = document.getElementById('editor_id').value; // 原生API
     html = K('#editor_id').val(); // KindEditor Node API
     html = $('#editor_id').val(); // jQuery
     // 设置HTML内容
     editor.html('HTML内容');
     // 关闭过滤模式，保留所有标签
     KindEditor.options.filterMode = false;
     KindEditor.ready(function(K){
         K.create('#editor_id');
     });


     // ASP
     KindEditor.ready(function(K) {
         K.create('#textarea_id', {
             uploadJson : '../asp/upload_json.asp',
             fileManagerJson : '../asp/file_manager_json.asp',
             allowFileManager : true
         });
     });
     // ASP.NET
     KindEditor.ready(function(K) {
         K.create('#textarea_id', {
             uploadJson : '../asp.net/upload_json.ashx',
             fileManagerJson : '../asp.net/file_manager_json.ashx',
             allowFileManager : true
         });
     });
     // JSP
     KindEditor.ready(function(K) {
         K.create('#textarea_id', {
             uploadJson : '../jsp/upload_json.jsp',
             fileManagerJson : '../jsp/file_manager_json.jsp',
             allowFileManager : true

         });
     });
     var dialog = K.dialog({
         width : 500,
         title : '测试窗口',
         body : '<div style="margin:10px;"><strong>内容</strong></div>',
         closeBtn : {
             name : '关闭',
             click : function(e) {
                 dialog.remove();
             }
         },
         yesBtn : {
             name : '确定',
             click : function(e) {
                 alert(this.value);
             }
         },
         noBtn : {
             name : '取消',
             click : function(e) {
                 dialog.remove();
             }
         }
     });
     var uploadbutton = K.uploadbutton({
         button : K('#editor_id')[0],
         fieldName : 'imgFile',
         url : '../php/upload_json.php',
         afterUpload : function(data) {
             if (data.error === 0) {
                 alert(data.url);
             } else {
                 alert(data.message);
             }
         }
     });
     uploadbutton.fileBox.change(function(e) {
         uploadbutton.submit();
     });*/
</script>

</body>
</html>